<template>
    <div class="login">
        <div class="box">
            <h2>智慧医疗</h2>
            <div class="loginForm">
                <el-form
                    class="demo-ruleForm"
                    status-icon
                    :model="adminForm"
                    label-width="100px"
                    :rules="rules"
                    ref="adminForm"
                >
                <el-form-item prop="phone">
                    <i class="el-icon-phone"></i>
                    <el-input placeholder="请输入手机号" v-model="adminForm.phone" auto-complete="off">
                    </el-input>
                </el-form-item>    
                <el-form-item prop="rawPassword">
                    <div @click="showpass=!showpass" 
                    style="float: left; cursor: pointer">
                        <i class="el-icon-lock" v-show="!showpass"></i>
                        <i class="el-icon-unlock" v-show="showpass"></i>
                    </div>
                    <div style="float: left">
                        <el-input type="password" placeholder="请输入密码" v-model="adminForm.rawPassword" v-show="!showpass" auto-complete="off" @keyup.enter="submitForm('adminForm')">   
                        </el-input>
                        <el-input type="text" placeholder="请输入密码" v-model="adminForm.rawPassword" v-show="showpass" auto-complete="off" @keyup.enter="submitForm('adminForm')">   
                        </el-input>
                    </div>
                </el-form-item> 
                <el-form-item>   
                    <router-link active-class="active" to="/Register">
                        <el-button style="width: 150px;" type="primary" > 
                        注册
                        </el-button>
                    </router-link>
                    <router-view></router-view>
                    <el-button style="width: 150px;" type="primary" @click="submitForm('adminForm')"> 
                    登录
                    </el-button>
                </el-form-item>

                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
import Register from './Register.vue';
import JSEncrypt from 'jsencrypt';  
export default {
    name: 'Login--',
    data () {
        return{
        showpass:false,
        title: '智慧医疗', 
        adminForm:{
            phone:"",
            rawPassword:""
        },
        rules: {  
        phone: [  
          { required: true, message: '请输入手机号', trigger: 'blur' },  
          { min: 11, max: 11, message: '手机号长度必须为11位', trigger: 'blur' },  
        ],  
        rawPassword: [  
          { required: true, message: '请输入密码', trigger: 'blur' },  
        ],  
      },  
      publicKey: '', // 公钥  
        }
    },
    components:{Register},
    methods: {
        login() {  
            const loading = this.$loading({  
                lock: true,  
                text: "加载中",  
                spinner: "el-icon-loading",  
                background: "rgba(0, 0, 0, 0.7)",  
            });  
            console.log("跳转登录页面");  
            this.$axios({  
                headers: { "Content-Type": "application/json;" },  
                method: "post",  
                url: "http://"+this.URLhost+"/api/user/login",  
                data: JSON.stringify({  
                userPhone: this.adminForm.phone,  
                userPassword: this.adminForm.encryptedPassword,  
                }),  
            })  
            .then((res) => {  
                console.log("123123123", res.data);  
                if (res.data && res.data.token) { // 假设 token 在 res.data.token 中  
                // 存储 token 到 localStorage  
                localStorage.setItem('userToken', res.data.token);  
                    
                this.$router.push({  
                    name: "Frame",  
                });  
                this.$message({  
                    message: "登录成功",  
                    type: "success",  
                });  
                } else {  
                alert('登录失败或未返回 token');  
                }  
                loading.close();  
            })  
            .catch((error) => {  
                console.error("登录失败", error);  
                loading.close();  
            });  
                
            // 设定一个超时关闭加载动画，但通常建议在请求结束后关闭  
            setTimeout(() => {  
                loading.close();  
            }, 5000);  
            },
        
    // 未联机代码
    submitForm(formName){
        this.$router.push({
                    name: "Frame",
        });
        this.$message({
                message: "登录成功",
                type: "success",
        })
        
    },
    //

    // // 联机代码
    //     submitForm(formName){
    //     this.$refs[formName].validate((valid) => {
    //         if(valid){
    //             this.login();
    //         }
    //         else{
    //             console.log("Error Login!!")
    //         }
    //     })
    // },
    //
    // async submitForm(adminForm) {  
    //   this.$refs[adminForm].validate(async (valid) => {  
    //     if (valid) {  
    //       try {  
    //         // 从后端获取公钥  
    //         this.publicKey = await this.getPublicKey();  
              
    //         // 使用公钥加密密码  
    //         const encryptedPassword = this.encryptPassword(this.adminForm.rawPassword);  
              
    //         // 将加密后的密码保存到表单中  
    //         this.adminForm.encryptedPassword = encryptedPassword;  
              
    //         // 调用注册方法  
    //         this.register();  
    //       } catch (error) {  
    //         console.error("加密或注册过程中发生错误:", error);  
    //       }  
    //     } else {  
    //       console.log("表单验证失败");  
    //       return false;  
    //     }  
    //   });  
    // },  
    // async getPublicKey() {  
    //   try {  
    //     const response = await this.$axios.get("http://"+this.URLhost+"/api/user/publicKey"); // 获取公钥的接口  
    //     return response.data.publicKey; // 假设后端返回的数据结构中包含公钥字段  
    //     console.log('获取到公钥为'+response.data.publicKey)
    //   } catch (error) {  
    //     throw new Error("无法获取公钥");  
    //   }  
    // },  
    // encryptPassword(rawPassword) {  
    //   if (!this.publicKey) {  
    //     throw new Error("公钥未定义，无法加密密码");  
    //   }  
    //   const encrypt = new JSEncrypt();  
    //   encrypt.setPublicKey(this.publicKey);  
    //   return encrypt.encrypt(rawPassword);  
    // },  


},
    mounted() {  
            document.title = this.title; // 设置网页标签的名称  
        }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  /*背景图片*/
  /* background-image: url("../assets/image/login.jpg"); */
  position: fixed;
  background-size: cover;
}

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  height: 300px;
  margin: auto;
  border: 1px solid #ccc;  
  background-color: rgba(255, 255, 255, 0.34);  
}

.box h2 {
  padding: 20px 0 20px 0;
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  line-height: 30px;
  color: #3333aa;
}



.el-form .el-form-item i {
  width: 50px;
  color: #3333aa;
}

.el-form .el-form-item .el-input {
  width: 250px;
}

.el-form .el-form-item .el-button {
    background-color: #3333aa;  
    color: #fff;  
    padding: 10px 30px;  
    border: 1px solid #fff; 
    cursor: pointer;  
    font-size: 18px;  
    /* text-align: center;   */
}
</style>
